<template>
  <view class="dialog-mask" v-if="visible" @click="handleMaskClick">
    <view class="dialog-container" @click.stop>
      <view class="dialog-header">
        <text class="dialog-title">{{ title }}</text>
      </view>
      <view class="dialog-content">
        <text>{{ content }}</text>
      </view>
      <view class="dialog-footer">
        <view class="dialog-btn cancel-btn" @click="handleCancel">
          <text>取消</text>
        </view>
        <view class="dialog-btn confirm-btn" @click="handleConfirm">
          <text>确认</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 控制对话框显示/隐藏
    visible: {
      type: Boolean,
      default: false
    },
    // 对话框标题
    title: {
      type: String,
      default: '提示'
    },
    // 对话框内容
    content: {
      type: String,
      default: ''
    },
    // 点击遮罩层是否关闭对话框
    closeOnClickMask: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 点击确认按钮
    handleConfirm() {
      this.$emit('confirm');
    },
    // 点击取消按钮
    handleCancel() {
      this.$emit('cancel');
    },
    // 点击遮罩层
    handleMaskClick() {
      if (this.closeOnClickMask) {
        this.$emit('cancel');
      }
    }
  }
};
</script>

<style scoped>
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.dialog-container {
  width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.dialog-header {
  padding: 30rpx;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.dialog-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.dialog-content {
  padding: 40rpx 30rpx;
  text-align: center;
  font-size: 32rpx;
  color: #666;
  line-height: 1.5;
}

.dialog-footer {
  display: flex;
  border-top: 1px solid #eee;
}

.dialog-btn {
  flex: 1;
  padding: 25rpx 0;
  text-align: center;
  font-size: 34rpx;
}

.cancel-btn {
  color: #666;
  border-right: 1px solid #eee;
}

.confirm-btn {
  color: #1677ff;
}
</style>
